<template>
  <view class="from_box">
    <view class="title">{{ t("FeedBack") }}</view>
    <view class="flex"><view class="text-red">*</view>{{ t("Content") }}:</view>
    <view class="from">
      <textarea
        cols="30"
        rows="10"
        :placeholder="t('serviceFrom')"
        v-model="message"
        placeholder-class="placeholder-class"
      />
      <view
        ><view :class="[isLength ? '' : 'color-red']">{{ message.length }}</view
        >/(20-200)</view
      >
    </view>
    <br />
    <view class="title">{{ t("Lang_Image") }}</view>
    <view class="addImageBox">
      <img
        v-for="(item, index) in imageValue"
        :key="index"
        :src="item"
        @click="() => imageValue.splice(index, 1)"
      />
      <view class="file-picker" @click="chooseImage"></view>
    </view>

    <view class="ts"
      >*Please upload a <b>PNG</b>, <b>JPG</b>, or <b>JPEG</b> file no larger
      than <b>5MB</b>.</view
    >
    <view class="from_btn" @click="fromData">{{ t("Lang_Submit") }}</view>
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
      <view class="popup">
        <image src="/static/images/icon/success.png" mode="scaleToFill" />
        <view
          ><b>{{ t("Lang_SubmissionSuccessful") }}!</b></view
        >
        <view class="text">
          {{ t("Lang_WeWillRespondWithin") }}24{{ t("Lang_Hours") }}.
        </view>
        <button
          type="primary"
          hover-class="button-hover"
          @click="
            () => {
              popup.close();
            }
          "
        >
          {{ t("Lang_OK") }}
        </button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, useAttrs, computed, onMounted } from "vue";
const message = ref("");
import { ServiceAPI } from "@/api";
const $attrs = useAttrs();
import { useI18n } from "vue-i18n";
import { upload } from "@/utils/upload";

const popup = ref(null);

const { t } = useI18n();
const emits = defineEmits(["postMessageBoards"]);

const MAXLENGTH = 200;
const MINLENGTH = 20;
// 是否满足字数
const isLength = computed(() => {
  return message.value.length >= MINLENGTH && message.value.length <= MAXLENGTH;
});

const fromData = async () => {
  if (!isLength.value) {
    uni.showToast({
      title: t("Please enter the content within the specified range"),
      icon: "none",
      duration: 2000,
    });
    return;
  }

  let res = await ServiceAPI.postMessageBoards({
    message: message.value,
    picUrl: imageValue.value,
  });
  message.value = "";
  popup.value.open("center");
  emits("postMessageBoards", res);
};
// 图片上传相关
const imageValue = ref([]);
const chooseImage = async () => {
  uni.showLoading({
    title: "上传中",
  });
  try {
    const res = await upload();
    if (res && res.code === 200) {
      imageValue.value.push(res.data);
    }
  } catch (error) {}
  uni.hideLoading();
};
</script>

<style lang="scss" scoped>
.from_box {
  padding: 20rpx;
  margin: 10rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  background: #fff;
  .ts {
    color: #aeaeae;
    font-size: 20rpx;
  }
  .popup {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    image {
      width: 70rpx;
      height: 70rpx;
      margin: 50rpx;
    }
    .text {
      margin: 30rpx 0;
      color: #898989;
    }
    button {
      background: #1aad19;
    }
  }
  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .text-red {
    color: red;
    margin-bottom: 10rpx;
  }
  .from {
    background: #fff;
    border-radius: 10rpx;
    width: 100%;
    height: 400rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border: 4rpx solid #eee;
    display: flex;
    flex-direction: column;
    textarea {
      flex: 1;
      width: 100%;
      border: none;
      outline: none;
      font-size: 28rpx;
      padding: 0;
      margin: 0;
    }
    view {
      display: flex;
      justify-content: flex-end;
      font-size: 24rpx;
      color: #999;
      .color-red {
        color: red;
      }
    }
  }

  .addImageBox {
    display: flex;
    flex-wrap: wrap;
    .file-picker,
    img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 15rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
  }
  .file-picker {
    width: 100rpx;
    height: 100rpx;
    border: 4rpx dashed #eee;
    position: relative;
    &::after {
      content: "+";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      line-height: 80rpx;
      font-size: 80rpx;
      color: #eee;
    }
  }
}

.placeholder-class {
  font-size: 28rpx;
}

.from_btn {
  margin-top: 40rpx;
  width: 100%;
  background: #1aad19;
  border-radius: 10rpx;
  color: #fff;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
